<head>
    <style>
        body {margin: 0; padding: 0;}
        canvas {
            border: 1px solid grey;
            background-color: #eee;
            background-size: auto 100%;
            background-position: 50% 50%;
        }
    </style>
    <script src="../build/index.js"></script>
    <script src="../build/components.js"></script>
</head>

<body>
    <canvas id="app" width="1200" height="1600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            events: {
                touchstart: function (e) {
                    var fireConfig = createFire(e.canvasX, e.canvasY);
                    $app.add(fireConfig);
                }
            }
        });

        var Fire = Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/resource/image/Fire.png');

        var createFire = function (initX, initY) {
            return Easycanvas.Sequence({
                src: Fire,
                frameWidth: -9,
                frameHeight: -1,
                interval: 50,
                loop: false,
                style: {
                    left: initX, top: initY,
                    // width: 120, height: 120,
                },
            });
        };

        $app.start();
    </script>
</body>

